<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
</head>
<body>
<div id="example" v-bind:style="bodyStyle">
    <!-- 自定义$index-->
    <div v-for="(i, te) in B">
        <p>0,{{A}}-{{$index}}-{{ te.b }}</p>
        <p>1,{{A}}-{{i}}-{{ te.b }}</p>
    </div>
    <ul>
        <template v-for="(i, a) in B">
            <li>{{ a.a }}</li>
            <li>{{ a.b }}</li>
            <li>{{ a.c }}</li>
        </template>
    </ul>
    <!-- track-by 在替换数组te时，如果Vue.js遇到一个b: 'four'的新对象，它知道可以复用这个已有对象的作用域和DOM元素-->
    <template v-for="(i,a) in B" track-by="b">
        <p>{{a.b}}</p>
    </template>
    <!-- 对象v-for-->
    <ul v-for="value in D">
        <li>{{$key}}:{{value}}</li>
    </ul>
    <p>方法2：</p>
    <ul v-for="(key, val) in D">
        <li>{{key}}:{{val}}</li>
    </ul>
    <!-- v-for也可以接受一个整数，此时它将重复模板次数-->
    <span v-for="n in 10">{{ n }}</span>
    <input type="text" v-model="name">
    <ol>
        <li v-for="na in E | filterBy name in 'name'">{{na.name}}</li>
    </ol>
</div>
<!--数组变动检测-->
<!--变异方法：push(),pop(),shift(),unshift(),splice(),sort(),reverse()-->
<!--替换数组：concat(),filter(),slice()-->
<script src="../js/vue.js"></script>
<script>
    var vFor = new Vue({
        el: '#example',
        data: {
            name: '',
            A: 'ZERO',
            B: [
                { a: 'one', b: 'two', c: 'three' },
                { a: '1', b: '2', c: '3' }
            ],
            C: [
                {a: '一'},
                {b: '二'}
            ],
            D: {
                firstName: 'lee',
                lastName: 'ocean',
                name: 'li'
            },
            E: [
                {name: 'lee'},
                {name: 'ocean'},
                {name: 'li'}
            ],
            bodyStyle: {
                margin: 0,
                padding: 0
            }
        },
        computed: {

        }
    });
</script>
</body>
</html>